import React, { Component } from 'react' // rce kuis
// 类组件有完整的生命周期还有状态
// 生命周期是在某个特定的时间段内自己执行的函数，不需要手动调用
// 类组件有this指向的问题
// 类组件的this是当前组件的实例
// 在js里修改this指向的方式有三种 ，call ，apply，bind ，bind 调用的时候执行
// 类组件中接受父组件的数据使用this.props
import axios from 'axios';

class Appson extends Component { // 类组件 
  constructor (props) {
     console.log("constructor");
     super(props)
     this.state = {
         name:"zhangsn",
         age:"20",
         arr:[]
     }
  }
  // 构造器如果不写，会默认的隐式生成一个，如果写了，就用写了的，如果我写了构造器，state必须放在构造器里
//   state = {
//       name:"zhangsan",
//       age:20
//   }
  fn (name) {
      console.log(name,"this");
    //   this.state.name = name
    this.setState({  // 这是异步的
        name,
        age:21
    },()=>{   //页面渲染完毕之后执行
        console.log(this.state.name);
    })
    // react 16的时候延时器可以拿到最新的状态，react18的时候不行了，现在又行了
    // setTimeout(()=>{
    //     console.log(this.state.name);
    // },200)
   
  }
  componentDidMount () { // 组件挂载完毕 发送ajax请求，获取dom节点
      axios.get("/api/list").then(res=>{
           this.setState({
               arr:res.data
           })
      })
     // 实例化一些插件
  }
  componentDidUpdate() {
      console.log("componentDidUpdate") // 组件修改完成
  }
  componentWillUnmount () { // 组件将要卸载，组件将要卸载再这个里面干什么，清除一些定时器延时器，卸载一些插件的实例，比如betterScroll
    console.log("componentWillUnmount");
  }
  render() { // render函数返回的内容就是页面渲染的内容
    // console.log("render",this.props);
    let {send,send1} = this.props
    console.log(send,send1);
    return (
      <div>
          <h4>{this.state.name}</h4>
          <h4>{this.state.age}</h4>
          <button onClick={this.fn.bind(this,"lisi")} id="mybtn">点击修改姓名</button>
          {
              this.state.arr && this.state.arr.length ?  this.state.arr.map((item,index)=>{
                  return <div key={index}>{item.name}</div>
              }):"暂无数据"
          }
      </div>
    )
  }
}

export default Appson